@import "var.scss";
@import "global.scss";
.user-music-wrap {
  padding-top: 100px;
  width: 100%;
  max-width:1200px;
  min-width: 800px;
  margin: 0 auto;
//   width: 100%;
//   border: $border;
  @include layout(space-between, flex-start);
  flex-wrap: wrap;

  
.top-wrap{
    height: 300px;
    // border:$border;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background-image: url('http://image-yunsheng.test.upcdn.net/typora-cloud-img/raw/master/202205302026893.webp');
    background-size: 100% 100%;
    .top-playlist-avater{
        width:210px;
        height: 210px;
        // border:$border;
        margin-left: 50px;
    }
    .top-playlist-info{

        height: 210px;
        // padding:20px;
        padding:0;
        margin: 10px;
        flex: 1;
        // border: $border;
        color:#fff;
        p{
            line-height: 25px;
            margin-bottom: 10px;
            margin-top: 0;
            padding: 0 !important;
        }
        p:first-child{
            font-size: 25px;
        }
        .creator-info{
            display: flex;
            align-items: center;
            margin:15px 0;
            .el-image{
                widows: 50px;
                height: 50px;
            }
            span {
                cursor: pointer;
           
            }
          
        }
    }
}
    .content-wrap{
        display: flex;
        width: 100%;
        margin-bottom: 150px;
        margin-top: 15px;
        .left-wrap {
    
            width:28%;
        
            padding-right: 15px;
        
            .box-card{
                width: 100%;
                flex-shrink: 0;
                .card-body {
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    // border:1px solid blue;
                    .collapse-title{
                        padding-left: 15px;
                    }
                    .el-collapse{
                        width: 100%;
                    }
                    .user-music-card {
                      width: 100%;
                      height: 75px;
                    //   border: 1px solid black;
                      display: flex;
                      box-sizing: border-box;
                      cursor: pointer;
                      .avater {
                        height: 75px;
                        width: 75px;
                        // border: $border;
                        .el-image {
                          height: 75px;
                          width: 75px;
                          // overflow: hidden;
                          box-sizing: border-box;
                        }
                      }
                      .list-info {
                          padding-left: 5px;
                          box-sizing: border-box;
                        //   width:100%;
                          flex: 1;
                          p{
                              width: 175px;
                              height:20px;
                              text-overflow: ellipsis;
                              overflow: hidden;
                              white-space: nowrap;
                            //   border: 5px solid green;
                              box-sizing: border-box;
                          }
                          p:first-child{
                              font-size: 13px;
                            
                          }
                          p:last-child {
                              color:#999;
                              font-size: 12px;
                          }
                      }
                    }
                    .active{
                        background-color: rgb(224, 218, 218);
                    }
                  }
            }
            
          }
        
          .ranking-card {
            width: 70%;
        
            // border: $border;
            .card-header {
                display: flex;
                justify-content:space-between;
                .el-button{
                    
                }
            }
            .card-body {
              span {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .table-header {
                width: 100%;
                height: 30px;
                border: $border;
                display: flex;
                @include layout(space-between, center);
              }
              .table-body {
                .ranking-music-item-wrap {
                  @include layout(space-between, center);
                }
              }
            }
          }
    }
  
}
